<template>
    <el-form :model="form" ref="form" :rules="rules" class="form">
        <el-form-item class="form-item" prop="username">
            <el-input placeholder="用户名手机" v-model="form.username"> </el-input>
        </el-form-item>

        <el-form-item class="form-item" prop="captcha">
            <el-input placeholder="验证码" v-model="form.captcha">
                <template slot="append">
                    <el-button @click="handleSendCaptcha"> 发送验证码 </el-button>
                </template>
            </el-input>
        </el-form-item>

        <el-form-item class="form-item" prop="nickname">
            <el-input placeholder="你的名字" v-model="form.nickname"> </el-input>
        </el-form-item>

        <el-form-item class="form-item" prop="password">
            <el-input placeholder="密码" type="password" v-model="form.password"></el-input>
        </el-form-item>

        <el-form-item class="form-item" prop="checkPassword">
            <el-input placeholder="确认密码" type="password" v-model="form.checkPassword">
            </el-input>
        </el-form-item>

        <el-button class="submit" type="primary" @click="handleRegSubmit">
            注册
        </el-button>
    </el-form>
</template>

<script>
export default {
    data() {
        const validatePass = (rule, value, callback) => {
            //rule指当前字段校验规则
            //value：当前子段值
            //callback回调函数，校验通过就调用，石板调用传失败信息
            if (value === "") {
                callback(new Error("请再次输入密码"));
            } else if (value !== this.form.password) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();//校验通过
            }
        };
        return {
            // 表单数据
            form: {
                username: "", // 登录用户名/手机
                password: "", // 登录密码
                checkPassword: "", // 确认密码
                nickname: "", // 昵称
                captcha: "", // 手机验证码
            },
            // 表单规则
            rules: {
                username: [
                    {
                        required: true, message: "请输入用户名", trigger: "blur",
                    },
                ],
                password: [
                    {
                        required: true, message: "请输入密码", trigger: "blur",
                    },
                ],
                checkPassword: [
                    {//validator：自定义校验规则
                        validator: validatePass, trigger: "blur",
                    },
                ],
                nickname: [
                    {
                        required: true, message: "请输入昵称", trigger: "blur",
                    },
                ],
                captcha: [
                    {
                        required: true, message: "请输入验证码", trigger: "blur",
                    },
                ],
            },
        };
    },
    methods: {
        // 发送验证码
        handleSendCaptcha() {
            if (!this.form.username) {
                // this.$confirm("手机号码不能为空", "提示", {
                //   confirmButtonText: "确定",
                //   showCancelButton: false,
                //   type: "warning",
                // });
                // return;
                return this.$message({
                    message: '请输入手机号码',
                    type: 'warnimg'
                })
            }

            if (this.form.username.length !== 11) {
                this.$confirm("手机号码格式错误", "提示", {
                    confirmButtonText: "确定",
                    showCancelButton: false,
                    type: "warning",
                });
                return;
            }

            this.$axios({
                url: 'captchas',
                method: 'post',
                data: {
                    tel: this.form.username
                }
            }).then((ans) => {
                console.log('验证码', ans.data.code)
                const  code  = ans.data.code;
                console.log('验证码', `模拟手机验证码为：${code}`)
                this.$confirm(`模拟手机验证码为：${code}`, '提示', {
                    confirmButtonText: '确定',
                    showCancelButton: false,
                    type: 'warning'
                })
            })
        },

        // 注册
        handleRegSubmit() {
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    // 注册提交
                    const { checkPassword, ...props } = this.form;

                    this.$axios({
                        url: `/accounts/register`,
                        method: "POST",
                        data: props,
                    }).then((res) => {
                        console.log(res.data);
                    });
                }
            });
            this.$refs.form.validate((bool)=>{
                if(bool){
                    this.$axios({
                        url:'/accounts/register',
                        method:'post',
                        data:{
                            username:this.form.username,
                            nickname:this.form.nickname,
                            captcha:this.form.captcha,
                            password:this.form.password
                        }
                    }).then(res=>{
                        console.log('注册成功',res)
                        this.$message.success("注册成功,请重新登陆");
                        this.$router.push("/")
                    })
                }
            })
        },
    },
};
</script>

<style scoped lang="less">
.form {
    padding: 25px;
}

.form-item {
    margin-bottom: 20px;
}

.form-text {
    font-size: 12px;
    color: #409eff;
    text-align: right;
    line-height: 1;
}

.submit {
    width: 100%;
    margin-top: 10px;
}
</style>